<template>
  <div class="box">
    <!-- <div class="inputBox" contenteditable></div>
    <el-input v-model="inputVal" type="textarea" style="display: none;" rows="3" @blur="handleBlur" @focus="handleFocus"></el-input>
    <el-button @click="handleSubmit">提交表单</el-button> -->
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, nextTick, onMounted } from 'vue'
//  const inputVal = ref('近年来，江西省大力培育专精特新企业，给予企业新增融资贴息、贴保等补贴支持。图为在赣州市赣县区的一家环境科技企业内，工人在生产线上赶制出口国外的智能中央空调零部件！')
//  const showBox = ref(false)
//  const handleBlur = () => {

//  }
//  const handleSubmit = () => {
//    const box = document.querySelector('.inputBox')
//    inputVal.value = box.innerText
//  }
//  const spanEventListener = () => {
//    const spanList = document.querySelectorAll('.inputBox span')
//       for(let i = 0; i < spanList.length; i++) {
//          spanList[i].addEventListener('mouseover', (e) => {
//             e.target.style.color = 'red'
//          })
//          spanList[i].addEventListener('mouseout', (e) => {
//             e.target.style.color = ''
//          })
//       }
//  }
//  const divUpdate = () => {}
//  onMounted(() => {
//    nextTick(() => {
//       const box = document.querySelector('.inputBox')
//       const replaceVal ="<span>" + inputVal.value.replace(/([,.?!，。？！、])/g, "$1</span><span>").slice(0, -6)
//       box.innerHTML = replaceVal
//       spanEventListener()
//       box.addEventListener('DOMCharacterDataModified', (val) => {
//          console.log(val.newValue.replace(/([,.?!，。？！、！])/g, "$1</span><span>"))
//          const changeReplaceVal ="<span>" + box.innerHTML.replace(/([,.?!，。？！、！])/g, "$1</span><span>").replace(/([,.?!，。？！、！])/g, "$1</span><span>")
//          console.log(box.innerHTML)
//          spanEventListener()
//       })
//    })
//  })
</script>

<style lang="less" scoped>
.box {
  .inputBox {
    width: 500px;
    min-height: 73px;
    border: 1px solid #dcdfe6;
    border-radius: 5px;
    padding: 5px;
  }
}
</style>
